import { Meta, Props, Story, Preview } from "@storybook/addon-docs/blocks";
import { withKnobs, text, boolean } from '@storybook/addon-knobs';

<Meta
title="Design Systems"
decorators={[withKnobs]}
/>

# Buttons

Default styles for all button types

<Preview>
  <Story name="Buttons">
    {({
      components: {},
      props:      {
        primaryButtonText: { default: text('Primary Button Text', 'primary') },
        secondaryButtonText: { default: text('Secondary Button Text', 'Secondary') },
        tertiaryButtonText: { default: text('Tertiary Button Text', 'tertiary') },
        linkButtonText: { default: text('Button Link Text', 'Button Link') },
        dropdownButtonText: { default: text('Dropdown Button Text', 'button dropdown') },
        disabled: { default: boolean('Disabled', false) }
      },
      template:   `
        <table>
          <tr>
            <th scope="col">Primary</th>
            <th scope="col">Secondary</th>
            <th scope="col">Tertiary</th>
            <th scope="col">Link</th>
            <th scope="col">Action</th>
          </tr>
          <tr>
            <td><button class="btn role-primary" :disabled="disabled">{{primaryButtonText}}</button></td>
            <td><button class="btn role-secondary" :disabled="disabled">{{secondaryButtonText}}</button></td>
            <td><button class="btn role-tertiary" :disabled="disabled">{{tertiaryButtonText}}</button></td>
            <td><button class="btn bg-transparent role-link" :disabled="disabled">{{linkButtonText}}</button></td>
            <td><button class="btn role-multi-action" :disabled="disabled">{{dropdownButtonText}}</button></td>
          </tr>
        </table>`
      })}
  </Story>
</Preview>

# Button Sizes
Available button sizes

Extra small
<Preview>
  <Story name="Extra-Small Buttons" >
    {({
      components: {},
      props:      {
        primaryButtonText: { default: text('Primary Button Text', 'primary') },
        secondaryButtonText: { default: text('Secondary Button Text', 'Secondary') },
        tertiaryButtonText: { default: text('Tertiary Button Text', 'tertiary') },
        linkButtonText: { default: text('Button Link Text', 'Button Link') },
        dropdownButtonText: { default: text('Dropdown Button Text', 'button dropdown') },
        disabled: { default: boolean('Disabled', false) }
      },
      template:   `
        <table>
          <tr>
            <th scope="col">Primary</th>
            <th scope="col">Secondary</th>
            <th scope="col">Tertiary</th>
            <th scope="col">Link</th>
            <th scope="col">Action</th>
          </tr>
          <tr>
            <td><button class="btn role-primary btn-xs" :disabled="disabled">{{primaryButtonText}}</button></td>
            <td><button class="btn role-secondary btn-xs" :disabled="disabled">{{secondaryButtonText}}</button></td>
            <td><button class="btn role-tertiary btn-xs" :disabled="disabled">{{tertiaryButtonText}}</button></td>
            <td><button class="btn bg-transparent role-link btn-xs" :disabled="disabled">{{linkButtonText}}</button></td>
            <td><button class="btn role-multi-action btn-xs" :disabled="disabled">{{dropdownButtonText}}</button></td>
          </tr>
        </table>`
      })}
  </Story>
</Preview>

Small
<Preview>
  <Story name="Small Buttons">
    {({
      components: {},
      props:      {
        primaryButtonText: { default: text('Primary Button Text', 'primary') },
        secondaryButtonText: { default: text('Secondary Button Text', 'Secondary') },
        tertiaryButtonText: { default: text('Tertiary Button Text', 'tertiary') },
        linkButtonText: { default: text('Button Link Text', 'Button Link') },
        dropdownButtonText: { default: text('Dropdown Button Text', 'button dropdown') },
        disabled: { default: boolean('Disabled', false) }
      },
      template:   `
        <table>
          <tr>
            <th scope="col">Primary</th>
            <th scope="col">Secondary</th>
            <th scope="col">Tertiary</th>
            <th scope="col">Link</th>
            <th scope="col">Action</th>
          </tr>
          <tr>
            <td><button class="btn role-primary btn-sm" :disabled="disabled">{{primaryButtonText}}</button></td>
            <td><button class="btn role-secondary btn-sm" :disabled="disabled">{{secondaryButtonText}}</button></td>
            <td><button class="btn role-tertiary btn-sm" :disabled="disabled">{{tertiaryButtonText}}</button></td>
            <td><button class="btn bg-transparent role-link btn-sm" :disabled="disabled">{{linkButtonText}}</button></td>
            <td><button class="btn role-multi-action btn-sm" :disabled="disabled">{{dropdownButtonText}}</button></td>
          </tr>
        </table>`
      })}
  </Story>
</Preview>

Large
<Preview>
  <Story name="Large Buttons">
    {({
      components: {},
      props:      {
        primaryButtonText: { default: text('Primary Button Text', 'primary') },
        secondaryButtonText: { default: text('Secondary Button Text', 'Secondary') },
        tertiaryButtonText: { default: text('Tertiary Button Text', 'tertiary') },
        linkButtonText: { default: text('Button Link Text', 'Button Link') },
        dropdownButtonText: { default: text('Dropdown Button Text', 'button dropdown') },
        disabled: { default: boolean('Disabled', false) }
      },
      template:   `
        <table>
          <tr>
            <th scope="col">Primary</th>
            <th scope="col">Secondary</th>
            <th scope="col">Tertiary</th>
            <th scope="col">Link</th>
            <th scope="col">Action</th>
          </tr>
          <tr>
            <td><button class="btn role-primary btn-lg" :disabled="disabled">{{primaryButtonText}}</button></td>
            <td><button class="btn role-secondary btn-lg" :disabled="disabled">{{secondaryButtonText}}</button></td>
            <td><button class="btn role-tertiary btn-lg" :disabled="disabled">{{tertiaryButtonText}}</button></td>
            <td><button class="btn bg-transparent role-link btn-lg" :disabled="disabled">{{linkButtonText}}</button></td>
            <td><button class="btn role-multi-action btn-lg" :disabled="disabled">{{dropdownButtonText}}</button></td>
          </tr>
        </table>`
      })}
  </Story>
</Preview>
